<template>
    <div>
        <van-search v-model="value" show-action @cancel="handleCancel" placeholder="请输入搜索关键字" />
        <van-list style="overflow: scroll;" :style="{ height }">
            <van-cell v-for="data in computedCinemaList" :key="data.cinemaId">
                <div>{{ data.name }}</div>
                <div class="address">{{ data.address }}</div>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            value: '',
            height: 0
        }
    },
    computed: {
        ...mapState('Cinema', ['cinemaList']),
        computedCinemaList() {
            if (this.value === '') return []
            return this.cinemaList.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase()) || item.address.toUpperCase().includes(this.value.toUpperCase()))
        }
    },
    methods: {
        handleCancel() {
            this.$router.replace('/cinema')
        }
    },
    mounted() {
        this.height = document.documentElement.clientHeight - 56 + 'px'
    }
}
</script>
<style lang="less" scoped>
.address {
    font-size: 12px;
    color: gray;
}
</style>